<template>
 <div>
    <!-- <van-cell title="展示弹出层" is-link @click="showPopup" />
<van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup> -->

<van-cell  is-link @click="showPopup" ><van-icon name="arrow-down" /></van-cell>
<van-popup v-model:show="show" :style="{ padding: '64px' }"  position="top" duration="0" overlay-class="vancell">

  <van-space wrap>
  <van-button size="small" color="#7232dd" plain v-for="item in CateList" :key="item.id">
  {{item.name}}
</van-button>
</van-space>

</van-popup>

  <van-tabs id="vantab" v-model:active="active" :swipeable="true" title-active-color="red" sticky @click-tab="onClickTab">  
    <van-tab  title="推荐"> 
      <div>
          <!-- 轮播图 -->
          <van-swipe style="height: 190px;" loop autoplay="3000">
          <van-swipe-item v-for="item in swiperList" :key="item.id">
            <img class="img" :src="item.picUrl" />
          </van-swipe-item>
          
        </van-swipe>

          <!-- 小提示 -->
            <van-row justify="center">
            <van-col  span="7" class="text" v-for="(item,index) in tipsList"  :key="index"><van-icon   size="16px" :name="item.icon" />{{ item.desc }}</van-col>
            </van-row>


              <!-- 分类列表 --> 
              <van-grid :gutter="10" :column-num="5" :border=false to="list" >
              <van-grid-item class="van-grid-item" v-for="(item,index) in kingKongList" :key="index" to="/list">

                <img :src="item.picUrl" class="van-grid-item-img"/>
                <div class="van-grid-item-text">{{ item.text }}</div>
              </van-grid-item>
              </van-grid>

            <!-- 新人礼 -->
            <!-- <router-link to="/goodsDetail"></router-link> -->
            <div v-for="(item,index) in indexActivityModule" :key="index" @click="getlist">
              <div id="moduleTitle"><span class="txt">— 新人专享礼 —</span></div>
                <div class="newpople">
            

              <div class="content" >
                <div class="left" >
                  <div class="name">新人专享礼包</div>
                  <div class="imgWrap">
                    <div data-yxshowstat="{&quot;event_name&quot;:&quot;show_index_newusergift_exclusive&quot;,&quot;page_name&quot;:&quot;index&quot;,&quot;event_action&quot;:&quot;show&quot;,&quot;parameters&quot;:{&quot;sequen&quot;:1,&quot;extra&quot;:&quot;&quot;}}" style="min-height: 1px;">
                      <img class="tm-lazy-image img tm-image-loaded" src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png">
                    </div>
                    <div class="animate"></div>
                  </div></div>
                  
                  <div class="right" >
                    <div class="module1">
                      <div data-yxshowstat="{&quot;event_name&quot;:&quot;show_index_newusergift_exclusive&quot;,&quot;page_name&quot;:&quot;index&quot;,&quot;event_action&quot;:&quot;show&quot;,&quot;parameters&quot;:{&quot;sequen&quot;:2,&quot;extra&quot;:&quot;&quot;}}" style="min-height: 1px;">
                        <div class="m-activityItem"><div class="picWrap"><img class="tm-lazy-image pic tm-image-loaded" src="https://yanxuan-item.nosdn.127.net/59848f9fcd00587f6ae1a0c212bd2f27.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=200x200"></div>
                        <div class="cnt">
                          <div class="title">福利社</div>
                          <div class="subTitle">今日特价</div>
                        </div></div></div></div>
                        <div class="module2">
                          <div data-yxshowstat="{&quot;event_name&quot;:&quot;show_index_newusergift_exclusive&quot;,&quot;page_name&quot;:&quot;index&quot;,&quot;event_action&quot;:&quot;show&quot;,&quot;parameters&quot;:{&quot;sequen&quot;:3,&quot;extra&quot;:&quot;&quot;}}" style="min-height: 1px;">
                            <div class="m-activityItem">
                              <div class="picWrap">
                                <img class="tm-lazy-image pic tm-image-loaded" src="https://yanxuan-item.nosdn.127.net/28b1037a9d4fde86ddfb219e4fefecc5.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=200x200">
                                <div class="discount">
                                  <div class="line1">¥149</div>
                                  <div class="line2">¥399</div>
                                </div></div>
                                <div class="cnt">
                                  <div class="title">新人拼团</div>
                                  <div class="subTitle">
                                  </div>
                                  <div class="tag">{{item.picUrl.title}}</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div></div>
            
            <!-- 类目热销榜 -->
            <div @click="getlist">
            <div class="moduleTitle"><div class="left-hope">类目热销榜</div></div>
            <van-grid style="clear:both" :gutter="10" reverse icon-size="60px" >

              <div>
                <div class="hotshoplist">
                  
                  <div class="hotshoplist-left" v-for="(item,index) in categoryList.slice(0,2)" :key="index" :icon="item.picUrl" :text="item.categoryName">
                    <span>{{ item.categoryName }}</span>
                    <img :src="item.picUrl" >
                  </div>

                </div>

                <!-- v-for="(item,index) in categoryList.slice(0,2)" :key="index" :icon="item.picUrl" :text="item.categoryName" -->
                <van-grid :gutter="10" reverse icon-size="60px">
                  <van-grid-item reverse v-for="(item,index) in categoryList.slice(2)" :key="index" :icon="item.picUrl" :text="item.categoryName" >
                  <span class="ranking-hoope-list-text">{{ item.categoryName }}</span>
                  <img class="ranking-hoope-list-img" :src="item.picUrl" alt="">
                  </van-grid-item>
                </van-grid>
                
              </div>

          </van-grid>
        </div>




            <!-- 为你精选 -->
            <div>
              <div class="m-favorite-title">为你精选</div>
              <HopeList @click="getlist"/>
            </div>

            <!-- 返回顶部 -->
            <van-back-top style="background-color: #7f7c7c;" id="backtop" right="15vw" bottom="10vh" ><van-icon name="arrow-up" /></van-back-top>

            </div>
            </div>

            

    </van-tab>
    <van-tab v-for="item in CateList?.slice(1,CateList.length)" :key="item.id" :title="item.name"  @click="clog"
    :name="item.id" 
    >
    <TypeNav :id="item.id"/>
    </van-tab>

    
    <!-- <van-tab>
      <van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" ><van-icon name="arrow-down" />布萨卡加</van-popup>
    </van-tab> -->
    <!-- <div class="toggle"></div> -->


    
    <!-- <van-popup v-model:show="isshow" teleport="body" /> -->
  </van-tabs>
  
  <!-- <van-cell title="展示弹出层" is-link @click="showPopup" />
  <van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup> -->
  <div >
    
  </div>



  


  

  </div>
</template>

<script lang="ts" setup>
import HopeList from "../HopeList/index.vue"
import TypeNav from "../TypeNav/index.vue"
import type { CategoryL1List, CategoryList, FocusList, IndexActivityModule, KingKongList, TipsLsit} from '@/types/home';
import { ref , onMounted} from 'vue';
import { reqCateList, reqHomeListInfo} from '@/APi/homelist'
import router from "@/router";



const getlist =() =>{
  router.push({ path: '/goodsDetail' })
}

// const show = ref(false);
//     const showPopup = () => {
//       show.value = true;
//     };

// const showTop = ref(false)
// const show = ref(false);
//     const showPopup = () => {
//       show.value = true;
//     };

const active = ref(0);
// 轮播图数据x`
const swiperList = ref<FocusList[]>([]) 
// tips数据
const tipsList = ref<TipsLsit[]>([])
// 分类数据
const kingKongList = ref<KingKongList[]>([])
// 类型热销榜
const categoryList = ref<CategoryList[]>([])
// 分类列表
const CateList = ref<CategoryL1List[]>()
//新人礼
const indexActivityModule = ref<IndexActivityModule[]>([])
// 获取id
const CateListId = ref<number>()

// const onClickTab = (e:unknown) => {
//   console.log(111)
//   console.log(e)
// }

const clog =() =>{
  // console.log(1111)
}
const onClickTab = (event:any) => {
  // console.log(event.name)
  CateListId.value = event.name
}

// 封装请求数据方法
const getHomeListInfo = async () => {
  const res= await reqHomeListInfo()

  if(res.code == 200){
    // console.log(res.data)
    // console.log(res.data.data.focusList)
    // console.log(res.data.data.kingKongModule.kingKongList)

    swiperList.value = res.data.data.focusList
    tipsList.value = res.data.data.policyDescList
    kingKongList.value = res.data.data.kingKongModule.kingKongList
    categoryList.value = res.data.data.categoryHotSellModule.categoryList
    indexActivityModule.value = res.data.data.indexActivityModule
  //  console.log(id)
  }
}

//  const handland =() =>{
//   isshow.value = !isshow.value
//  }


const getreqCateList =async () =>{
  // console.log(111)
  const res = await reqCateList()

  
    // console.log(22)
    // console.log(res.data)
    CateList.value = res.data.categoryL1List
    // CateListId.value = res.data.categoryL1List.id
    // console.log(CateList.value)

}

onMounted(()=>{
  // 调用方法
  getHomeListInfo()

  // 分类数据方法
  getreqCateList()

})


const show = ref(false);
const showPopup = () => {
  show.value = true;
};
</script>

<script lang="ts">

export default {
  name: 'VHeader',


  components:{
    HopeList,
    TypeNav
  }
}
</script>

<style lang="less" scoped>
::v-deep( .van-cell__right-icon){
  line-height: 13px !important;
}
::v-deep(.van-popup--top){
  padding: 0px !important;
  // background-color: red;
}
::v-deep(.van-cell__left-icon, .van-cell__right-icon){
  line-height: 0;
}

::v-deep(.van-cell){
  width: 50px;
  height: 30px;
  position: sticky;
  top: 56px;
  left: 347.2px;
  z-index: 99;
  background-color: rgba(233, 233, 255, 0.8);
  float: right;
}
.m-indexHd .tabWrap .toggleWrap .toggle .icon {
    margin-top: 0.15rem;
    display: inline-block;
    vertical-align: middle;
    width: 0.3rem;
    height: 0.3rem;
    background-size: 1.06rem 0.85rem;
    background-position: -0.34rem 0;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
}
.toggle {
    width: 1rem;
    height: 0.6rem;
    text-align: center;
    background: #fff;
}
.content {
    padding-left: 0.3rem;
    overflow: hidden;
}
 .left {
    display: block;
    width: 175px;
    height: 215px;
    background: #f9e9cf;
    border-radius: 0.04rem;
    margin-right: 0.04rem;
    float: left;
    color: #333;
}
 .right {
    float: left;
}


.left .name {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    padding: 0.3rem 0 0 0.3rem;
}

.left .imgWrap {
    margin: 0.37rem auto;
    width: 2.58rem;
    height: 2.57rem;
    position: relative;
}

.left .imgWrap .img {
    width: 129px;
    height: 129px;
}

 .left .imgWrap .animate {
    position: absolute;
    width: 0.3rem;
    height: 0.2rem;
    bottom: 0.18rem;
    right: 0.65rem;
    background: url(//yanxuan.nosdn.127.net/3f7e731….png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-animation: carousel 1s linear infinite;
    animation: carousel 1s linear infinite;
}




 .right .module1 {
    background: #fbe2d3;
    border-radius: 4px;
    width: 171px;
    height: 105px;
    margin-bottom: 0.04rem;
}


.m-activityItem {
    height: 2.15rem;
}

.right .module1 .picWrap {
    top: 0.15rem;
}
.m-activityItem .picWrap {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 0;
    top: 0;
}
.m-activityItem .picWrap .pic {
    width: 2rem;
    height: 2rem;
}


.tm-lazy-image.tm-image-loaded {
    -webkit-animation: enterIn .2s linear;
    animation: enterIn .2s linear;
    background: transparent;
}


.m-activityItem, .m-activityItem .cnt {
    position: relative;
}

.m-activityItem .title {
    font-family: PingFangSC-Medium;
    font-size: 16px;
}


.m-activityItem .subTitle {
    color: #7f7f7f;
}

.right .module2 {
    background: #ffecc2;
    border-radius: 4px;
    width: 171px;
    height: 105px;
}

.m-activityItem {
    height: 2.15rem;
}
.m-activityItem {
    display: block;
    color: #333;
   width: 3.43rem;
    height: 2.2rem;
    float: left;
    border-radius: 0.04rem;
    margin: 0 0.04rem 0.04rem 0;
    font-size: 12px;
    padding: 0.2rem 0 0 0.3rem;
}


.m-activityItem .cnt {
    position: relative;
}
.m-activityItem .picWrap {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 0;
    top: 0;
}

.right .module2 .picWrap {
    top: 0.15rem;
}

.m-activityItem .picWrap .pic {
    width: 100px;
    height: 100px;
}

.tm-lazy-image.tm-image-loaded {
    -webkit-animation: enterIn .2s linear;
    animation: enterIn .2s linear;
    background: transparent;
}



.m-freshmanModule .m-activityItem .discount {
    top: 0;
    right: 0.3rem;
}
.m-activityItem .picWrap .discount {
    position: absolute;
    top: 0.3rem;
    right: 0.34rem;
    width: 0.8rem;
    height: 0.8rem;
    opacity: .8;
    background: #f59524;
    border-radius: 50%;
    padding-top: 0.1rem;
    color: #fff;
    text-align: center;
}



.m-activityItem .picWrap .discount .line2 {
    font-size: .2rem;
    margin-top: -0.07rem;
    text-decoration: line-through;
}

// .m-activityItem .title {
//     font-family: PingFangSC-Medium;
//     font-size: .32rem;
// }

.m-activityItem .subTitle {
    color: #7f7f7f;
}


.m-activityItem .tag {
    position: relative;
    display: inline-block;
    padding: 0 0.1rem;
    height: 0.32rem;
    background: #cbb693;
    border-radius: 0.04rem;
    color: #fff;
    font-size: .22rem;
    line-height: .32rem;
    text-align: center;
}

:deep(.van-back-top){
  background-color: #fff ;

 }
  .img{
    width: 375px;
    height: 185px;

  }
  .text {
    font-size: .24rem;
    color: #333;
    margin-left: 0.08rem;
    line-height: .32rem;
    display: flex; /*所有子元素block或inline都变成行内块元素的样式*/
    align-items: center;         /*子元素中线居中*/
    // justify-content: flex-end;       /*子元素靠右*/

}
.van-grid-item{
  width: 55px;
  height: 78px;
  margin-top: 15px;
}
.van-grid-item-img{
  height: 55px;
  width: 55px;
}
.van-grid-item-text{
  font-size: 10px;
  // float: left;
  width: 55px;
  text-align: center; 
  margin-top: 5px;

}
#moduleTitle {
    height: 45px;
    width: 100%;
    line-height: .9rem;
    text-align: center; 
    font-weight: 300;
    font-size: 16px;
    margin-top: 15px;
}
.newpople{
  display: flex;
}
.newpople .left-hope{
    // border: 2px red solid;
    display: block;
    width: 3.43rem;
    height: 4.34rem;
    background: #f9e9cf;
    border-radius: 0.04rem;
    margin-right: 0.04rem;
    float: left;
    color: #333;
    margin-left: 10px;
}
.newpople .left-hope img{
  // width: 100%;
  // height: 100%;
  width: 171px;
  height: 217px;
}
.newpople .right{
  // border: 2px red solid;
  float: right;
  width: 171px;
  height: 217px;
  // margin-left: 50px;
}

.newpople .right img{
  width: 171px;
  height: 107px;
} 
.moduleTitle {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.3rem;
    background: #fff;
    overflow: hidden;
    font-size: 16px;  
    margin-top: 30px;
}
.hotselling{
  width: 170px;
  height: 100px;
}
.m-favorite-title {
    color: #333;
    font-size: 18px;
    font-family: PingFang SC Source Han Sans CN;
    font-style: normal;
    font-weight: 700;
    margin-left: 0.2rem;
    margin-bottom: 0.2rem;
    margin-top: 10px;
}
:deep(.backtop){
  background-color: #7f7c7c;
}
.hotshoplist{
  width: 100%;
  // border: red 1px solid;
  // clear:both;
  overflow:hidden;

}
.hotshoplist-left{
  width: 172px;
  height: 100px;
  border-radius: 0.04rem;
  // border: red solid ;
  // position: absolute;
  background-color: rgb(189, 189, 203);
  float: left;
  margin-left: 5px;
}
.hotshoplist-left img{
  height: 100px;
  width: 100px;
  float: right;
}
.hotshoplist-left span{
  margin-left: 3px;
  font-size: 14px;
  position: relative;
  top: 25px;
}
.ranking-hoope-list-img{
  width: 60px;
  height: 60px;
}
.ranking-hoope-list-text{
  font-size: 12px;
}

::v-deep(.van-popup--top){
  top: 95px
  // position: sticky;
}

</style>
